<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function Vue({data}){
            this._data=data;

            // 遍历——data的数据 在vm上放一份
            for(let key in this._data){
                Object.defineProperty(this,key,{
                    get:function proxyGetter(){
                        return this._data[key];
                    },
                    set:function proxySetter(val){
                        this._data[key]=val;
                    }
                })
            }
            // 遍历vm身上的——data，覆盖自己的属性，把自己的所有的属性都设置为拥有存取器的属性
            for(let key in this._data){
                let value= this._data[key];
                Object.defineProperty(this._data,key,{
                    get:function reactiveGetter(){
                        return value;
                    },
                    set:function reactiveSetter(val){
                        value=val;
                        console.log("通知所有的使用当前数据的组件 进行更新");
                        test();
                    }
                })
            }
        }
        const vm=new Vue({
            data:{
                count:1,
                price:299,
            }
        });
        console.log(vm);
        function test(){
            console.log(`我是模板，当前的价格是${vm.price},数量是${vm.count}`);
        }
        // 初始化的时候要获取一次数据
        test();
    </script>
</body>
</html>